<template>
    <view class="fixed tabBar flex flex-sub bottom left align-center text-center" :style="style">
      <view class="basis-xl" v-for="(item, index) in barData" :key="index" @click="toPage(item)">
        <view  class="basis-sm" :style="'color:' + (item.checked ? storeColor.bar.checked : storeColor.bar.color)">
          <text :class="item.icon"></text>
          <view>{{item.name}}</view>
        </view>
      </view>
    </view>
</template>

<script lang="ts" setup>

import { themeStore } from '@/store/pinia/modules/theme'

const useTheme = themeStore();
const { barData, storeColor, setBarData} = useTheme;
// const { proxy } = getCurrentInstance();
// const { $CustomBar } = proxy;

const style = computed(() => {
  let bgImage = storeColor.bar.backgroundImage;
  let style = `background:${storeColor.bar.background};width:100%`
  if (bgImage) {
    style = `${style}background-image:url(${bgImage});`;
  }
  return style
})

const toPage = (e: any) => {
  uni.reLaunch({url: e.url})
}
onLoad(() => {
  let route = getCurrentPages()[0].route
  route = '../'+route.slice(6)
  let data = barData
  data.map(item => {
    item.checked = item.url === route;
  })
  setBarData(data)
})

</script>
<style>
.tabBar{
  height: var(--window-bottom);
  min-height: 50px;
}
body.uni-body.pages-index-index{
  background-color: var(--background-color) !important;
}
</style>
